<template>
  <div class="discuss">
    <n-spin :show="allShow">
      <div class="discuss-center">
        <div class="left">
          <div class="left-head">
            <div class="top">
              <div class="top-left">
                <n-breadcrumb separator=">">
                  <n-breadcrumb-item @click="getAllCategory">{{ isALL }}
                    <span v-show="nowCategory === ''">({{ total }})</span></n-breadcrumb-item>
                  <n-breadcrumb-item v-if="nowCategory !== ''">
                    {{ nowCategory }}<span class="total">( {{ total }} )</span>
                  </n-breadcrumb-item>
                </n-breadcrumb>
              </div>
              <div class="top-right">
                <el-input type="input" class="search no-border" placeholder="搜索讨论标题" v-model="search" size="small">
                  <template #prefix>
                    <i class="iconfont icon-sousuo"></i>
                  </template>
                </el-input>
                <n-button icon-placement="left" class="post-discussion" type="primary" size="small" @click="showPost()">
                  <template #icon>
                    <i class="iconfont icon-fabu-copy1-copy"></i>
                  </template>
                  发布讨论
                </n-button>
                <n-button icon-placement="left" class="my-all" type="info" size="small" v-show="isMy" @click="changeMy">
                  <template #icon>
                    <i class="iconfont icon-icon-test"></i>
                  </template>
                  全部讨论
                </n-button>
                <n-button icon-placement="left" class="my-all" type="info" size="small" v-show="!isMy"
                  @click="changeMy">
                  <template #icon>
                    <i class="iconfont icon-quanbu"></i>
                  </template>
                  我的讨论
                </n-button>
              </div>
            </div>
            <div class="bottom">
              <n-button type="info" round size="tiny" @click="searchTag = true" style="margin-left: 10px">
                <template #icon>
                  <i class="iconfont icon-tianjia"></i>
                </template>
                标签查询</n-button>
              <el-tag v-for="(tag, index) in dynamicTags" :key="tag" class="mx-1 tag active-tag" closable
                @close="delSearchTags(index)">
                <span class="tag">{{ tag.name }}</span>
              </el-tag>
            </div>
          </div>
          <div class="discussion" v-if="allDiscussion.length !== 0">
            <discussion-vue :choiceTag="choiceTag" :discussion="item" :isMy="isMy" v-for="item in allDiscussion"
              :key="item.id" @getCategoryDiscuss="getCategoryDiscuss" @loading="loading" @getDiscussAPI="getDiscussAPI"
              @updateDisucss="getDisucssDetail"></discussion-vue>
          </div>
          <div class="pagination">
            <el-pagination layout="prev, pager, next" :page-count="parseInt(pageCount)" v-model:current-page="pageNum"
              v-model:page-size="pageSize" :hide-on-single-page="true" @change="changePage">
            </el-pagination>
          </div>
        </div>
        <div class="right">
          <n-spin :show="isLoading">
            <div class="category">
              <div class="category-head">
                <h3 class="category-head-item">
                  <i class="iconfont icon-fenlei"></i>
                  分类
                </h3>
                <h3 class="category-head-item change" v-show="!toEdit" @click="edit" v-if="
                  $store.oj.userData.authLevel !== 0 &&
                  $store.oj.userData.id !== null
                ">
                  <i class="iconfont icon-fabu-copy1-copy"></i>
                  编辑
                </h3>
                <h3 class="category-head-item change" @click="edit" v-show="toEdit">
                  <i class="iconfont icon-wancheng"></i>
                  完成
                </h3>
              </div>
              <div class="category-bottom">
                <category-vue class="classic" v-show="!toEdit" v-for="item in category" :key="item" :classic="item"
                  @getCategoryDiscuss="getCategoryDiscuss"></category-vue>
                <div class="edit-category" v-show="toEdit">
                  <update-category-vue class="classic" v-for="item in category" :key="item" :classic="item"
                    @updateCategory="updateCategory"></update-category-vue>
                  <div class="add-category">
                    <n-input v-for="(item, index) in categoryName" :key="item" v-model:value="item.name" type="text"
                      placeholder="请输入分类名称">
                      <template #suffix>
                        <i class="add iconfont icon-wancheng" @click="addCategory(index)"></i>
                        <i class="del iconfont icon-chacha" @click="delCategoryName(index)"></i>
                      </template>
                    </n-input>
                  </div>
                  <n-button type="success" size="tiny" @click="addCategoryName">
                    <template #icon>
                      <i class="iconfont icon-tianjia"></i>
                    </template>
                  </n-button>
                </div>
              </div>
            </div>
          </n-spin>
        </div>
      </div>
    </n-spin>
    <div class="drawer">
      <el-drawer v-model="show" :height="'100%'" :size="'100%'" :direction="'ttb'" :modal="false" :show-close="false">
        <template #header>
          <div class="header">
            <div class="header-title">
              <el-input class="title" v-model="discussionDate.title" placeholder="此处输入标题..." size="large" />
            </div>
            <div class="doing">
              <div class="is-top" v-if="$store.oj.userData.authLevel !== 0">
                <span>置顶:</span>
                <n-switch v-model:value="isTop" size="small" />
              </div>
              <n-button type="error" size="tiny" @click="cancel">
                <template #icon>
                  <i class="iconfont icon-quxiao"></i>
                </template>
                取消
              </n-button>
              <n-button type="warning" size="tiny" @click="reset">
                <template #icon>
                  <i class="iconfont icon-zhongzhineirong"></i>
                </template>
                重置
              </n-button>
              <n-button type="primary" size="tiny" @click="postDiscussAPI" v-show="!isUpdate">
                <template #icon>
                  <i class="iconfont icon-fabu-copy1-copy"></i>
                </template>
                发布讨论
              </n-button>
              <n-button type="primary" size="tiny" @click="updateDiscussAPI" v-show="isUpdate">
                <template #icon>
                  <i class="iconfont icon-fabu-copy1-copy"></i>
                </template>
                更新讨论
              </n-button>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-category">
              <el-dropdown @command="chooseCategry" trigger="click">
                <span class="el-dropdown-link">
                  <i class="iconfont icon-jinghao3" style="color: #18a058"></i>
                  所属话题:{{ chooceCategory.name }}
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="item in category" :command="item">{{ item.name }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="bottom-tag">
              <div v-show="chooceCategory.name === '题解'">题号：</div>
              <div v-show="chooceCategory.name === '题解'">
                <el-input class="r-s-input" placeholder="输入题号" size="small" v-model="pid" clearable v-if="pid !== ''">
                </el-input>
              </div>
              <div v-show="chooceCategory.name === '题解'">
                <n-button v-if="pid == ''" type="info" round size="tiny" @click="
                  isChoiceQues = true;
                getProblemList();
                " style="margin-right: 10px">
                  <template #icon>
                    <i class="iconfont icon-tianjia"></i>
                  </template>
                  选择题目</n-button>
              </div>

              <div>标签:</div>
              <el-tag v-for="(tag, index) in postTag" :key="tag" class="mx-1 tag active-tag" @close="delTag(index)"
                closable>
                <span>{{ tag.name }}</span>
              </el-tag>
              <n-button type="info" round size="tiny" @click="isChoiceTag = true" style="margin-left: 10px">
                <template #icon>
                  <i class="iconfont icon-tianjia"></i>
                </template>
                选择标签</n-button>
            </div>
          </div>
        </template>
        <markdown-vue ref="content" :detailContent="discussionDate.content"></markdown-vue>
      </el-drawer>
      <el-dialog class="dialog" v-model="isChoiceQues" title="题目" :modal="false">
        <div class="q-header">
          <el-input size="small" v-model="searchQues" type="text" placeholder="请输入题目标题" round
            style="width: 170px; --el-input-border-radius: 30px">
            <template #suffix>
              <i class="iconfont icon-sousuo"></i>
            </template>
          </el-input>
          <el-select v-model="difficulty" class="m-2" placeholder="Select" size="small" style="
              width: 100px;
              height: 26px;
              margin-left: 10px;
              --el-border-radius-base: 30px;
              --el-component-size-small: 26px;
            ">
            <el-option v-for="item in quesDifficulty" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="quesCard-body">
          <el-table :data="problem.records" stripe class="problemTable">
            <el-table-column type="index" label="序号" width="60px" align="center" />
            <el-table-column prop="problemId" label="题目ID">
              <template #default="scoped">
                <n-ellipsis style="max-width: 120px" :tooltip="false">
                  {{ scoped.row.problemId }}
                </n-ellipsis>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="题目">
              <template #default="scoped">
                <span class="problemTable-title" @click="hanlderToProbDetail(scoped.row.id)">{{ scoped.row.title
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" align="center">
              <template #default="scoped">
                <el-tag round size="small" type="success" v-show="scoped.row.difficulty === 0">简单</el-tag>
                <el-tag round size="small" type="warning" v-show="scoped.row.difficulty === 1">中等</el-tag>
                <el-tag round size="small" type="danger" v-show="scoped.row.difficulty === 2">困难</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scoped">
                <n-button type="info" @click="choiceQues(scoped.row)" size="tiny" round>
                  选择
                </n-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageNation">
          <el-pagination class="pagination" background small :page-sizes="[10, 20, 30]"
            layout="prev, pager, next, sizes" :total="Number(problem.total)" :current-page="quesNum"
            :page-size="quesSize" @current-change="changeQuesNum" @size-change="changeQuesSize" />
        </div>
      </el-dialog>
      <el-dialog class="dialog" v-model="isChoiceTag" title="标签" :modal="false">
        <div class="tag-category">
          <el-tabs :tab-position="'left'" class="demo-tabs">
            <div class="addTagTitle">添加标签</div>
            <el-tab-pane v-for="item in tagCategory" :key="item" :label="item.name">
              <el-tag v-for="tag in item.tagList" :key="tag" class="mx-1 active-tag" :disable-transitions="false">
                <span class="tag" v-show="!isChoice(tag)" @click="addTag(tag)">{{ tag.name }}</span>
                <span class="tag" v-show="isChoice(tag)">{{ tag.name }}</span>
              </el-tag>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </div>

    <el-dialog class="dialog" v-model="isChoiceTag" title="标签" :modal="false">
      <div class="tag-category">
        <el-tabs :tab-position="'left'" class="demo-tabs">
          <div class="addTagTitle">添加标签</div>
          <el-tab-pane v-for="item in tagCategory" :key="item" :label="item.name">
            <el-tag v-for="tag in item.tagList" :key="tag" class="mx-1 active-tag" :disable-transitions="false">
              <span class="tag" v-show="!isChoice(tag)" @click="addTag(tag)">{{
                tag.name
              }}</span>
              <span class="tag" v-show="isChoice(tag)">{{ tag.name }}</span>
            </el-tag>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <el-dialog class="dialog" v-model="searchTag" title="标签" :modal="false">
      <div class="tag-category">
        <el-tabs :tab-position="'left'" class="demo-tabs">
          <div class="addTagTitle">添加标签</div>
          <el-tab-pane v-for="item in tagCategory" :key="item" :label="item.name">
            <el-tag v-for="tag in item.tagList" :key="tag" class="mx-1 active-tag" :disable-transitions="false">
              <span class="tag" v-show="!searchChoice(tag)" @click="searchByTag(tag)">{{ tag.name }}</span>
              <span class="tag" v-show="searchChoice(tag)">{{ tag.name }}</span>
            </el-tag>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import discussionVue from "@/components/ojComponents/discuss/discussion/discussion.vue";
import categoryVue from "@/components/ojComponents/discuss/category/category.vue";
import updateCategoryVue from "@/components/ojComponents/discuss/category/updateCategory.vue";
import markdownVue from "@/components/ojComponents/markdown/markdown.vue";

import {
  getDisscussCategoryAPI,
  categoryAPI,
  getTagAPI,
  discussAPI,
  getDiscussAPI,
  getMyDiscussionAPI,
  getDiscussDetail,
  updateDiscussAPI,
  getProblemListAPI,
} from "@/api/ojAPI/ojAPI";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      search: "",
      categoryId: "",
      nowCategory: ``,
      dynamicTags: [],
      searchTagsId: [],
      allDiscussion: [],
      choiceTag: [],
      isMy: false,
      category: [],
      show: false,
      discussionDate: {
        title: "",
        descript: "",
        category: "",
        content: "",
        pid: "",
      },
      discussCategory: [],
      chooceCategory: {},
      postTag: [],
      postTagId: [],
      choocedTag: [],
      markdownText: "",
      isTop: false,
      isChoiceTag: false,
      isChoiceQues: false,
      tagCategory: [],
      toEdit: false,
      categoryName: [],
      isLoading: false,
      allShow: true,
      total: null,
      searchTimer: null,
      isUpdate: false,
      discussId: null,
      addDiscussTime: null,
      pageNum: 1,
      pageSize: 6,
      pageCount: null,
      deboundTime: null,
      searchTag: false,
      pid: "",
      problem: {
        records: [],
        total: 10,
      },
      quesNum: 1,
      quesSize: 10,
      searchQues: "",
      quesDifficulty: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "0",
          label: "简单",
        },
        {
          value: "1",
          label: "中等",
        },
        {
          value: "2",
          label: "困难",
        },
      ],
      difficulty: "-1",
    };
  },
  computed: {
    //用于确定是我的讨论还是全部
    isALL() {
      if (this.isMy) {
        return "我的讨论";
      } else {
        return "全部";
      }
    },
  },
  methods: {
    changeQuesNum(num) {
      this.quesNum = num;
      this.getProblemList();
    },
    changeQuesSize(size) {
      this.quesSize = size;
      this.getProblemList();
    },
    updateQues() {
      this.$forceUpdate();
    },
    choiceQues(ques) {
      this.pid = ques.id;
    },
    //查看标签是否有被选中
    isChoice(tag) {
      let isChoice = false;
      this.postTag.forEach((item) => {
        if (item.id === tag.id) {
          //判断标签是否已经存在
          //如果存在了就不让重复添加
          isChoice = true;
        }
      });
      return isChoice;
    },
    //查看标签是否有被选中
    searchChoice(tag) {
      let isChoice = false;
      this.dynamicTags.forEach((item) => {
        if (item.id === tag.id) {
          //判断标签是否已经存在
          //如果存在了就不让重复添加
          isChoice = true;
        }
      });
      return isChoice;
    },
    //点击进行分类的编辑
    edit() {
      this.toEdit = !this.toEdit;
    },
    //改变是我的还是全部
    changeMy() {
      if (this.$store.oj.userData.id) {
        this.allShow = true;
        this.isMy = !this.isMy;
        this.$router.push({
          query: { isMy: this.isMy },
        });
        this.getDiscussAPI();
      } else {
        ElMessage.error("请先登录");
        return;
      }
    },
    //将发布讨论界面显示
    showPost() {
      if (this.$store.oj.userData.id !== null) {
        if (this.category.length !== 0) {
          this.show = true;
        } else {
          ElMessage.error("无分类");
        }
      } else {
        ElMessage.error("请先登录");
      }
    },
    //重置内容
    reset() {
      this.discussionDate = {
        title: "",
        descript: "",
        category: "",
        content: "",
      };
      this.postTag = [];
      this.postTagId = [];
      this.$refs.content.clearContent();
    },
    //取消发布讨论
    cancel() {
      this.show = false;
    },
    //发布讨论选择category
    chooseCategry(category) {
      this.chooceCategory = category;
    },
    //删除已选标签
    delTag(index) {
      this.postTag.splice(index, 1);
      this.postTagId.splice(index, 1);
    },
    //选出查询使用的标签
    delSearchTags(index) {
      this.dynamicTags.splice(index, 1);
      this.searchTagsId.splice(index, 1);
      this.choiceTag.splice(index, 1);
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.getDiscussAPI();
      }, 300);
    },
    //添加标签到要发布的报告中
    addTag(tag) {
      if (this.postTag.length <= 5) {
        this.postTag.push({
          name: tag.name,
          id: tag.id,
          isChoice: false,
        });
        this.postTagId.push(tag.id);
      } else {
        ElMessage.warning("标签数量不能大于5");
      }
    },
    //通过标签查询讨论
    searchByTag(tag) {
      this.dynamicTags.push({
        name: tag.name,
        id: tag.id,
        isChoice: false,
      });
      this.searchTagsId.push(tag.id);
      this.choiceTag.push(tag.name);
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.getDiscussAPI();
      }, 300);
    },
    //添加分类，向分类列表中添加一个新的分类
    addCategoryName() {
      this.categoryName.push({
        name: "",
      });
    },
    //删除要添加的分类
    delCategoryName(index) {
      this.categoryName.splice(index, 1);
    },
    //当更新分类的时候重新获取分类
    updateCategory() {
      this.isLoading = true;
      this.getDisscussCategoryAPI();
    },
    //用于获取分类的讨论
    getCategoryDiscuss(data) {
      this.allShow = true;
      this.categoryId = data.id;
      this.nowCategory = data.name;
      this.getDiscussAPI();
    },
    //当有分类的时候重新获取全部的讨论
    getAllCategory() {
      this.allShow = true;
      this.categoryId = "";
      this.nowCategory = "";
      this.getDiscussAPI();
    },
    //将遮蔽层打开
    loading() {
      this.allShow = true;
    },
    //改变页数，请求分页
    changePage(page) {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.pageNum = page;
        this.getDiscussAPI();
      }, 300);
    },
    //用于获取讨论详细
    async getDisucssDetail(discussion) {
      this.pid = discussion.pid;
      await getDiscussDetail(discussion.id).then((res) => {
        if (res.data.code === 200) {
          this.discussionDate.content = res.data.data.content;
          this.discussionDate.title = res.data.data.title;
          this.isTop = res.data.data.isTop;
          this.chooceCategory.name = res.data.data.categoryName;
          this.categoryId = res.data.data.categoryId;
          this.postTag = res.data.data.tags;
          this.discussId = res.data.data.id;
          this.show = true;
          this.isUpdate = true;
          res.data.data.tags.forEach((item) => {
            this.postTagId.push(item.id);
          });
        }
      });
    },
    //对发布讨论时连续点击进行防抖
    async postDiscussAPI() {
      if (this.chooceCategory.name === "题解" && this.pid === "") {
        ElMessage.error("题号请勿放空");
        return;
      } else {
        if (this.addDiscussTime) {
          clearTimeout(this.addDiscussTime);
        }
        this.addDiscussTime = setTimeout(() => {
          this.addDisucss();
        }, 300);
      }
    },
    //发布讨论
    async addDisucss() {
      const content = this.$refs.content.content;
      if (content === "") {
        ElMessage.error("内容请勿放空");
        return;
      }
      const title = this.discussionDate.title;
      if (title === "") {
        ElMessage.error("标题请勿放空");
        return;
      }
      const tags = this.postTagId;
      if (tags.length === 0) {
        ElMessage.error("请为讨论添加标签");
        return;
      }
      const category = {
        content: content,
        title: title,
        categoryId: this.chooceCategory.id,
        isTop: this.isTop,
        tags: tags,
        pid: this.pid,
      };
      console.log(category);
      await discussAPI(category)
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.reset();
            ElMessage.success("发布成功");
            this.show = false;
            this.getDiscussAPI();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //更新讨论
    async updateDiscussAPI() {
      const content = this.$refs.content.content;
      if (content === "") {
        ElMessage.error("内容请勿放空");
        return;
      }
      const title = this.discussionDate.title;
      if (title === "") {
        ElMessage.error("标题请勿放空");
        return;
      }
      const tags = this.postTagId;
      if (tags.length === 0) {
        ElMessage.error("请为讨论添加标签");
        return;
      }
      const category = {
        content: content,
        title: title,
        categoryId: this.chooceCategory.id,
        isTop: this.isTop,
        tags: tags,
        id: this.discussId,
        pid: this.pid,
      };
      await updateDiscussAPI(category)
        .then((res) => {
          if (res.data.code === 200) {
            this.reset();
            ElMessage.success("修改成功");
            this.show = false;
            this.getDiscussAPI();
            this.isUpdate = false;
            this.discussId = null;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加分类
    async addCategory(index) {
      this.isLoading = true;
      const name = this.categoryName[index].name.trim();
      if (name === "") {
        this.isLoading = false;
        ElMessage.error("分类名称不能为空");
        return;
      }
      //判断分类名称是否已存在
      //已存在不保存
      let isExist = false;
      this.category.forEach((item) => {
        if (name === item.name) {
          isExist = true;
        }
      });
      if (isExist) {
        this.isLoading = false;
        ElMessage.error("分类名称已存在");
        return;
      }
      const category = this.categoryName[index];
      await categoryAPI(category)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success("添加成功");
            this.getDisscussCategoryAPI();
            this.delCategoryName(index);
            this.isLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取分类
    async getDisscussCategoryAPI() {
      await getDisscussCategoryAPI()
        .then((res) => {
          if (res.data.code === 200) {
            this.category = res.data.data;
            this.chooceCategory = res.data.data[0];
          }
          this.isLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取标签
    async getTagAPI() {
      await getTagAPI()
        .then((res) => {
          if (res.data.code === 200) {
            this.tagCategory = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取题目列表
    getProblemList() {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(async () => {
        const searchParams = {
          pageSize: this.quesSize,
          pageNum: this.quesNum,
          difficulty: this.difficulty,
        };
        await getProblemListAPI(searchParams)
          .then((res) => {
            if (res.data.code === 200) {
              if (res.data.data === null) {
                this.problem.records = [];
                this.problem.total = 1;
                return;
              }
              this.problem.records = res.data.data.records;
              this.problem.total = Number(res.data.data.total);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }, 400);
    },
    //匿名讨论或我的讨论获取
    async getDiscussAPI() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        like: this.search,
        categoryId: this.categoryId,
        tagList: this.searchTagsId,
        pid: "",
      };
      if (this.isMy) {
        await getMyDiscussionAPI(data)
          .then((res) => {
            if (res.data.code === 200) {
              this.allDiscussion = res.data.data.records;
              this.total = res.data.data.total;
              this.pageCount = res.data.data.pages;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        await getDiscussAPI(data)
          .then((res) => {
            if (res.data.code === 200) {
              this.allDiscussion = res.data.data.records;
              this.total = res.data.data.total;
              this.pageCount = res.data.data.pages;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.allShow = false;
      this.discussShow = false;
    },
  },
  components: {
    discussionVue,
    categoryVue,
    updateCategoryVue,
    markdownVue,
  },
  mounted() {
    if (
      this.$route.query.isMy &&
      this.$route.query.isMy.includes("true") &&
      this.$store.oj.isLogin
    ) {
      this.isMy = true;
    }
    if (this.$store.oj.discuss.isCategory) {
      this.categoryId = this.$store.oj.discuss.getCategory.id;
      this.nowCategory = this.$store.oj.discuss.getCategory.name;
      this.$store.oj.discuss.clearCategoryData();
    }
    this.allShow = true;
    this.getDisscussCategoryAPI();
    this.getTagAPI();
    this.getDiscussAPI();
  },
  watch: {
    search(oldValue, newValue) {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }
      this.searchTimer = setTimeout(() => {
        this.getDiscussAPI();
      }, 300);
    },
    searchQues() { },
    difficulty() {
      this.getProblemList();
    },
  },
};
</script>

<style lang="less" scoped>
.discuss {
  width: 99%;
  height: 100%;
  padding: 1rem 2.5rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;

  .discuss-center {
    display: flex;
    width: 85%;
    height: 100%;
    padding: 0 10px;
    margin: 0 auto;

    .left {
      width: 75%;
      margin-right: 20px;
      border-radius: 16px;

      .left-head {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 15px;
        box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1),
          0 2px 8px rgba(0, 10, 32, 0.05);
        margin-bottom: 10px;

        .top {
          display: flex;
          border-radius: 10px;
          height: 32px;
          padding: 16px;
          margin-top: 0px;
          background-color: #fff;
          justify-content: space-between;

          .top-left {
            margin-left: 10px;
            display: flex;
            align-items: center;

            .total {
              align-items: center;
              color: #939497;
            }

            .n-breadcrumb {
              margin-right: 10px;

              .n-breadcrumb-item {
                font-weight: 600;
                --n-item-color-hover: #fff;
                --n-item-color-pressed: #fff;
                --n-item-text-color: black;
                --n-item-text-color-active: #939497;
                --n-item-text-color-hover: #337ecc;
                --n-item-text-color-pressed: #337ecc;
                --n-font-size: 16px;
              }
            }
          }

          .top-right {
            margin-right: 10px;
            display: flex;
            align-items: center;

            .search {
              border-radius: 20px;
              margin-right: 10px;
              --n-border-hover: 1px solid #79bbff !important;
              --n-border-focus: 1px solid #79bbff !important;
            }

            .post-discussion {
              border-radius: 20px;
            }

            .my-all {
              border-radius: 20px;
              margin: 0px 10px;
            }
          }
        }

        .bottom {
          margin: 5px 0;
          margin-left: 10px;
          padding-bottom: 10px;
          display: flex;
          align-items: center;

          .el-tag {
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgb(166, 209, 255);
            margin-left: 10px;
            height: 20px;

            .tag {
              font-size: 12px;
              font-weight: 400;
              color: rgba(0, 122, 255, 1);
              border-radius: 12px;
              cursor: pointer;
            }
          }
        }
      }

      .pagination {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1),
          0 2px 8px rgba(0, 10, 32, 0.05);
        display: flex;
        justify-content: center;
      }
    }

    .right {
      position: sticky;
      top: 65px;
      width: 22%;
      height: 37vh;
      background-color: #fff;
      border-radius: 16px;
      background: rgba(255, 255, 255, 1);
      border-radius: 8px;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1),
        0px 2px 8px rgba(0, 0, 0, 0.08);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      padding: 16px 16px 4px 16px;
      overflow: auto;

      ::-webkit-scrollbar {
        width: 7px;
      }

      ::-webkit-scrollbar-thumb {
        background: #999;
        border-radius: 10px;
      }

      ::-webkit-scrollbar-track {
        background: #eee;
        box-shadow: 0 0 5px #999;
      }

      .category {
        height: 100%;
        background: #fff;
        border-radius: 6px;
        overflow: auto;

        .category-head {
          display: flex;

          .category-head-item {
            border-bottom: 1px solid #eee;
            width: 100%;
            color: #34495e;
            font-size: 14px;
            font-weight: 600;
            padding-bottom: 10px;
            margin-bottom: 10px;
            overflow: hidden;
          }

          .change {
            margin-right: auto;
            text-align: right;
            cursor: pointer;
          }

          .change:hover {
            color: #18a058;
          }
        }

        .category-bottom {
          .classic {
            margin-bottom: 5px;
          }

          .classic:hover {
            color: #18a058;
            background-color: rgba(201, 253, 204, 0.3);
          }

          .add-category {
            padding-right: 5px;

            i {
              cursor: pointer;
              margin-left: 5px;
              transition: color 0.2s ease;
            }

            .add:hover {
              color: #18a058;
            }

            .del:hover {
              color: #d03050;
            }
          }

          .n-input {
            margin: 5px 0;
          }

          .n-button {
            width: 100%;
          }
        }
      }
    }
  }
}

::v-deep(.n-spin-content) {
  --n-opacity-spinning: 0;
}

.n-drawer-content {
  --n-body-padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;

  ::v-deep(.n-drawer-header) {
    display: block;
    padding: 10px 0 20px 0;
    border-bottom: none;
  }

  ::v-deep(.n-drawer-body) {
    background-color: #f2f3f5;
    --n-body-padding: 20px 20px;
  }

  .header {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);

    .doing {
      width: 22%;
      display: flex;

      .n-button {
        margin: 0 5px;
      }

      .is-top {
        margin: 0 5px;

        span {
          font-size: 0.8875em;
          margin-right: 5px;
        }
      }
    }

    .header-title {
      min-width: 75%;
      margin-right: 15px;
      margin-top: 20px;

      .title {
        ::v-deep(.el-input__wrapper) {
          box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
          cursor: text;
          padding: 7px 15px;
          font-size: 16px;

          .el-input__inner {
            font-weight: bold;
          }
        }
      }
    }
  }

  .bottom {
    padding: 5px 10px;
    border: 1px solid rgba(240, 240, 240, 1);
    display: flex;

    .bottom-category {
      padding-left: 12px;

      .n-button {
        height: 32px;
        border-radius: 16px;
        background-color: rgba(0, 10, 32, 0.05);
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
        color: rgba(38, 38, 38, 0.75);
      }
    }

    .bottom-tag {
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: rgba(116, 121, 116, 0.89);
      font-size: 16px;

      .r-s-input {
        width: 120px;
        padding-right: 15px;

        ::v-deep(.el-input__wrapper) {
          box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
          border-bottom: 1px solid #dcdfe6;
          font-size: 12px;

          .el-input__inner {
            cursor: text !important;
          }
        }
      }

      .el-tag {
        background-color: rgba(255, 255, 255, 1);
        border: none;
        margin: 0 5px;

        ::v-deep(.el-icon) {
          color: rgba(255, 255, 255, 1);
          --el-tag-hover-color: rgba(39, 81, 89, 0.26);
        }
      }

      .tag {
        font-size: 12px;
        font-weight: 400;
        color: rgba(38, 38, 38, 0.75);
        height: 24px;
        border-radius: 12px;
        padding: 3px 8px;
        border: 1px solid rgba(0, 10, 32, 0.05);
        background-color: rgba(0, 10, 32, 0.05);
        cursor: pointer;
        transition: color 1s ease-out;
      }

      .active-tag {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(86, 203, 107, 1);
        background: linear-gradient(to right,
            rgba(86, 203, 107, 0.7),
            rgba(86, 203, 107, 0.8),
            rgba(86, 203, 107, 0.9));
        border-color: rgba(86, 203, 107, 1);
      }
    }
  }
}

::v-deep(.el-drawer) {
  color: #606266;
  font-size: 14px;
  word-break: break-all;

  .el-drawer__header {
    display: block;
    padding: 10px 0 0px 0;
    border-bottom: none;
    margin: 0;

    .header {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid rgba(240, 240, 240, 1);

      .doing {
        width: 22%;
        display: flex;
        align-items: center;

        .n-button {
          margin: 0 5px;
        }

        .is-top {
          margin: 0 5px;

          span {
            font-size: 0.8875em;
            margin-right: 5px;
          }
        }
      }

      .header-title {
        min-width: 75%;
        margin-right: 15px;

        .title {
          .el-input__wrapper {
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: text;
            padding: 7px 15px;
            font-size: 16px;

            .el-input__inner {
              font-weight: bold;
            }
          }
        }
      }
    }

    .bottom {
      padding: 5px 10px;
      border: 1px solid rgba(240, 240, 240, 1);
      display: flex;

      .bottom-category {
        padding-left: 12px;

        .n-button {
          height: 32px;
          border-radius: 16px;
          background-color: rgba(0, 10, 32, 0.05);
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          cursor: pointer;
          font-size: 12px;
          color: rgba(38, 38, 38, 0.75);
        }
      }

      .bottom-tag {
        display: flex;
        align-items: center;
        margin-left: 20px;
        color: rgba(116, 121, 116, 0.89);
        font-size: 16px;

        .r-s-input {
          width: 120px;
          padding-right: 15px;

          .el-input__wrapper {
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            border-bottom: 1px solid #dcdfe6;
            font-size: 12px;

            .el-input__inner {
              cursor: text !important;
            }
          }
        }

        .el-tag {
          background-color: rgba(255, 255, 255, 1);
          border: none;
          margin: 0 5px;

          ::v-deep(.el-icon) {
            color: rgba(255, 255, 255, 1);
            --el-tag-hover-color: rgba(39, 81, 89, 0.26);
          }
        }

        .tag {
          font-size: 12px;
          font-weight: 400;
          color: rgba(38, 38, 38, 0.75);
          height: 24px;
          border-radius: 12px;
          padding: 3px 8px;
          border: 1px solid rgba(0, 10, 32, 0.05);
          background-color: rgba(0, 10, 32, 0.05);
          cursor: pointer;
          transition: color 1s ease-out;
        }

        .active-tag {
          color: rgba(255, 255, 255, 1);
          background-color: rgba(86, 203, 107, 1);
          background: linear-gradient(to right,
              rgba(86, 203, 107, 0.7),
              rgba(86, 203, 107, 0.8),
              rgba(86, 203, 107, 0.9));
          border-color: rgba(86, 203, 107, 1);
        }
      }
    }
  }
}

.form-item {
  margin-bottom: 22px;

  .custom-label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0 0 10px;
    line-height: 30px;
  }
}

.dialog {
  .body-header {
    margin-bottom: 10px;
  }

  .tag-category {
    width: 170px;
    height: 264px;
    overflow-y: scroll;

    .mx-1 {
      margin: 0 5px;

      .tag {
        cursor: pointer;
      }
    }

    .mx-1:hover {
      background-color: rgba(140, 192, 250, 0.672);
      color: #fff;
      transition: color 0.3s ease;
    }

    .active-tag {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(86, 203, 107, 1);
      background: linear-gradient(to right,
          rgba(86, 203, 107, 0.7),
          rgba(86, 203, 107, 0.8),
          rgba(86, 203, 107, 0.9));
      border-color: rgba(86, 203, 107, 1);
    }

    .addTagTitle {
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #222226;
      line-height: 20px;
      margin-bottom: 10px;
    }
  }

  .pageNation {
    width: 96%;
    height: 5%;
    margin: 10px auto;
    display: flex;
    justify-content: center;
  }

  .quesCard-body {
    width: 100%;
    height: 80%;

    .problemTable {
      width: 100%;
      height: 50vh;

      .status {
        display: flex;
        justify-content: center;

        .ac {
          color: rgb(58, 159, 85);
        }

        .se {
          color: grey;
        }

        .red {
          color: rgb(228, 103, 102);
        }

        .blue {
          color: rgb(85, 158, 255);
        }

        .orange {
          color: orange;
        }
      }

      .problemTable-title {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover {
          color: rgb(46, 187, 84);
          cursor: pointer;
          text-decoration: underline;
        }
      }

      .title-tag {
        background-color: rgb(252, 252, 253);
      }
    }
  }

  .q-header {
    margin-bottom: 10px;
    margin-left: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #a4a4a859;
    padding-bottom: 3px;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块
     内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #b3b3b3;
}

::v-deep(.el-tabs__header) {
  padding-bottom: 12px;
  border: 0;
  background: #fff;
  width: 160px;
}

::v-deep(.el-tabs__content) {
  width: 340px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: absolute;
  left: 185px;
  width: 353px;
  padding: 9px 14px 12px;
  height: 260px;
  overflow-y: auto;
  border-radius: 0 0 4px 0;
}

::v-deep(.el-tabs__nav) {
  white-space: unset;
  position: unset;
  -webkit-transition: none;
  transition: none;
  transition: none;
  transition: none;
  float: none;
  z-index: 2;
}

::v-deep(.el-tabs--left .el-tabs__item.is-left) {
  display: block;
  padding: 0 16px !important;
  border-radius: 4px;
  height: 30px !important;
  margin: 3px 0;
  font-weight: 400;
  font-size: 14px !important;
  line-height: 30px !important;
  color: #777888;
  text-align: left;
}

::v-deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
  height: 0%;
}

::v-deep(.el-tabs--left .el-tabs__active-bar.is-left) {
  width: 0px;
}

::v-deep(.is-active) {
  color: #507999 !important;
  font-weight: 500 !important;
  background: #fff;
  border-radius: 0;
  border-color: #fff !important;
}

::v-deep(.el-dialog) {
  top: 34px;
  width: 560px;
  height: auto;
  z-index: 10;
  background: #fff;
  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e3e3;
  padding: 10px 0;
  padding-top: 0;
}

::v-deep(.el-dialog__header) {
  text-align: center;
  margin: 0 auto;
  margin-right: 10px;
  border-bottom: 1px solid #f0f0f2;
  text-align: center;
  font-weight: 600;
  color: #222226;
  padding-top: 5px;
  display: flex;
}

::v-deep(.el-dialog__title) {
  margin: auto auto;
  font-size: 16px;
}

::v-deep(.el-dialog__headerbtn) {
  top: 0px;
  align-items: center;
  height: 39px;
}

::v-deep(.el-dialog__body) {
  padding: 10px;
}

::v-deep(.drawer) {
  position: relative;
  z-index: 999 !important;
}

::v-deep(.bottom-category .el-dropdown-link) {
  height: 32px;
  border-radius: 16px;
  background-color: rgba(0, 10, 32, 0.05);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: rgba(38, 38, 38, 0.75);
  padding: 0px 10px;
  border: 1px solid #35b9723d;
}
</style>
